import React, { Component } from 'react';
import PropTypes from 'prop-types'
import {nanoid} from "nanoid"

import './index.css'


export default class Header extends Component {

	// 对接收的props进行类型以及必要性的限制
	static propTypes = {
		addTodo: PropTypes.func.isRequired
	}
	
	// 键盘事件的回调  
	handleKeyUp = (e) => {
		// 解构赋值
		const {key, target} = e
		// 判断是否回车
		if (key !== "Enter") return
		// 添加的todo的name不能为空
		if (target.value.trim() === ''){
			alert("输入不能为空")
			return
		}
		// 准备todoObj
		// nanoid 能生成全球唯一的标识
		const todoObj = {id:nanoid(), name:target.value, done:false}
		// 向app发送数据
		this.props.addTodo(todoObj)
		// 清空输入
		target.value = ''
	}
	
	render() {
		return (
				<div className="todo-header">
					<input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
				</div>
			)
	}
}
